<template>
<view class="">
<!-- 			<custom bgColor="bg-gradual-pink">操作条</custom> -->
	<view class="cu-card dynamic" :class="isCard?'':'no-card'">
		<view class="cu-item shadow" v-for="(item,idb) in 1" :key='idb'>
			<view class="cu-list menu menu-avatar">
				<view class="cu-item">
					<view class="cu-avatar round lg" v-bind:style="{backgroundImage:'url(' + lgxq.slimg + ')'}"></view>
					<view class='content flex-sub'>
					<view>
						<text class="text-cut">{{lgxq.username}}</text>
						<view class="cu-tag round bg-orange sm">SVIP</view>
					</view>
					<view class="text-gray text-sm">
						
						<text class="icon-new text-orange margin-right-xs"></text> {{lgxq.fenlei}}</view>
					</view>
				<view class="action">
					<view class="text-grey text-xs">{{lgxq.times}}</view>
					<view class="icon-attentionfill margin-right-xs text-gray">  {{lgxq.click}}</view>
				</view>					
				</view>
			</view>
			<view class='text-content'>
				{{lgxq.title}}
			</view>
                  <view class="image-content photo-xq">
                    <image style="width: 80%;" mode="widthFix" :src="lgxq.pics"
                        ></image>
						
                </view>
				<!-- 文章图片间隔 -->
				
				<view class="jiange">
					
				</view>
			  <view class="box">	
			<view class="cu-bar tabbar bg-white">
				<view class="action">
					<view class="icon-cu-image">
						<image src="/static/img/list/zylist.png"></image>
					</view>
					<view class="text-gray">列表</view>
				</view>
				<view class="action">
					<view class="icon-cu-image">
						<image src="/static/img/list/shoucang.png"></image>
					</view>
					<view class="text-gray">收藏</view>
				</view>

				<view class="btn-group">
						<button class="cu-btn round line-mauve" @click="ziyuanlist()">获取资源 </button>
				</view>
			</view>
		</view>
			
			
			<!-- 访者 -->
<view class="cu-list menu" :class="[menuBorder?'sm-border':'',menuCard?'card-menu margin-top':'']">	
			  
			<view class="cu-item" :class="menuArrow?'arrow':''">
				<view class="content">
			<text class="icon-tagfill text-red  margin-right-xs"></text>
			<text class="text-grey">{{lgxq.fenlei}}</text>
				</view>
				<view class="action">
					<view class="cu-avatar-group" v-for="(fwhis,indexs2) in fw_list" :key="indexs2">
						<view class="cu-avatar round sm" v-bind:style="{backgroundImage:'url(' + fwhis.wximg + ')'}"></view>

					</view>
					<text class="text-grey text-sm">{{fwcount}} 人</text>
				</view>
				
				
			</view>

		<view class="cu-bar bg-white solid-bottom ">
			<view class="action">
				<text class="icon-title text-orange "></text> 评论此篇文章({{plcount}}人)
			</view>
		</view>
							
							
	        </view>			
			
						<!-- 间隔 -->
			<view class="cu-list menu menu-avatar comment ">
				<view class="cu-item" v-for="(plist,index3) in pl_list" :key='index3'>
					<view class="cu-avatar round" v-bind:style="{backgroundImage:'url(' + plist.wximg + ')'}"></view>
					<view class='content'>
						<view class='text-grey'>{{plist.username}}</view>
						<view class='text-gray text-content text-df'>
							{{plist.title}}
						</view>
						<view class='margin-top-sm flex justify-between'>
							<view class='text-gray text-df'>{{plist.time}}</view>
							<view>
								<text :class="['icon-appreciate'+!isZan?'fill':'','text-'+!isZan?'red':'gray']"></text>
								<text class="icon-locationfill text-gray margin-left-sm" style="font-size: 12px;">{{plist.address}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			
			
		</view>
	</view>	

			<view class="cu-bar foot input" :style="[{bottom:InputBottom+'px'}]">
		<view class="action" @tap="share()">
			<text class="icon-share text-mauve" ></text>
		</view>
		<input v-model="pltext" class="solid-bottom" :adjust-position="false" :focus="false" maxlength="300" cursor-spacing="10"
		 @focus="InputFocus" @blur="InputBlur"></input>
<!-- 		<view class="action">
			<text class="icon-voicefill text-grey" @click="yuyin()"></text>
		</view> -->
		<button class="cu-btn bg-mauve shadow"  @tap="gopl">BIU</button>
	</view>
	<!-- 微信弹窗 -->
	<!-- share弹窗 -->
		<view class="share" :class="shareClass" @touchmove.stop.prevent="discard" @tap="hideShare">
			<view class="mask"></view>
			<view class="layer" @tap.stop="discard">
				<view class="h1">分享</view>
				<view class="list">
					<view class="box" @click="wxshare()">
						<image src="../../../static/img/share/wx.png"></image>
						<view class="title">
							微信好友
						</view>
					</view>
					<view class="box" @click="wxpyqshare()">
						<image src="../../../static/img/share/pyq.png"></image>
						<view class="title">
							朋友圈
						</view>
					</view>
					<view class="box" @click="wxscshare()">
						<image src="../../../static/img/share/qq.png"></image>
						<view class="title">
							微信收藏
						</view>
					</view>
				</view>
				<view class="btn" @tap="hideShare">
					取消
				</view>
			</view>
			
		</view>	
	<!-- 分享结束 -->
	
	</view>	
</template>

<script>
	export default {
		data() {
			return {
				isCard: '',
				menuArrow:0,
				menuCard:0,
				menuBorder:0,
				lgxq:{},
				fw_list:[],
				fwcount:'',
				pl_list:[],
				plcount:'',
				pltext:'',
				ziyuan_down:'',
				shareClass:'',//分享弹窗css类，控制开关动画
				InputBottom: 0
			};
			
		},
        onLoad: function (option) { 
        console.log(option.id); 
        this.lginfoid = option.id;
		this.zyuan_type = option.type;
		this.getlgxq_re()
        },
		methods: {
			isCards(e) {
				this.isCard = e.detail.value
			},
			gopl(){
            uni.getLocation({
                type: 'wgs84',
                success: function (res) {
                console.log('当前位置的经度：' + res.longitude);
                console.log('当前位置的纬度：' + res.latitude);
				
                }
                });	
							
				//			
				uni.getStorage({
					key: 'user_data',
					success: function (res) {
						this.userid = res.data;
						
				console.log(this.userid)
				
					},
					fail:function(e){
							uni.showToast({title: '请登录',icon:"none"});
						    uni.navigateTo({
							url:'../../logo/login'
						})
					}
				});							
						
				if (this.pltext.length < 1) {
				    uni.showToast({
				        icon: 'none',
				        title: '打几个字评论下'
				    });
				    return;
				}
	//
	            const useridd = uni.getStorageSync('user_data');
				uni.request({
				url: 'https://api.xuejss.com/xue/?s=wendang.pl_lgant',
				method: 'POST',
				 header: {
                 'Content-Type':'application/x-www-form-urlencoded'
                 },
				data: {
				uid:useridd,
				xq_title:this.pltext,
				infoid:this.lginfoid,
				xq_location:this.xq_location	
				},
					success: res => {
						console.log(res);
						var newsList = res.data.data;
						if(res.data.code==0){
							
						uni.showToast({title:'发布成功',icon:'none'});	
						uni.navigateBack({
						 delta: 1
						   });
							
						}
					},
					complete: res => {
						uni.hideLoading();
						uni.stopPullDownRefresh();
					}
				});					
	//			
				
				
	
			},
					// 分享弹窗
			share(){
				this.shareClass = 'show';
			},
			hideShare(){
				this.shareClass = 'hide';
				setTimeout(() => {
					this.shareClass = 'none';
				}, 150);
			},
			// 微信分享
			wxshare(){
					var title=this.lgxq.title;
					var url='https://www.xuejss.com';
					var miaoshu = this.lgxq.times;
                    var imgurl = this.lgxq.slimg
				uni.share({
				    provider: "weixin",
				    scene: "WXSceneSession",
				    type: 0,
				    href: url,
				    title: title,
				    summary: miaoshu,
				    imageUrl: imgurl,
				    success: function (res) {
				        console.log("success:" + JSON.stringify(res));
				    },
				    fail: function (err) {
				        console.log("fail:" + JSON.stringify(err));
				    }
				});	
			},
			
			// 微信收藏分享
			wxscshare(){
					var title=this.lgxq.title;
					var url='https://www.xuejss.com';
					var miaoshu = this.lgxq.times;
                    var imgurl = this.lgxq.slimg
				uni.share({
				    provider: "weixin",
				    scene: "WXSceneFavorite",
				    type: 0,
				    href: url,
				    title: title,
				    summary: miaoshu,
				    imageUrl: imgurl,
				    success: function (res) {
				        console.log("success:" + JSON.stringify(res));
				    },
				    fail: function (err) {
				        console.log("fail:" + JSON.stringify(err));
				    }
				});	
			},			
	
				// 微信朋友圈分享 
	wxpyqshare(){
			var title=this.lgxq.title;
			var url='https://www.xuejss.com';
			var miaoshu = this.lgxq.times;
	        var imgurl = this.lgxq.slimg
		uni.share({
		    provider: "weixin",
		    scene: "WXSenceTimeline",
		    type: 0,
		    href: url,
		    title: title,
		    summary: miaoshu,
		    imageUrl: imgurl,
		    success: function (res) {
		        console.log("success:" + JSON.stringify(res));
		    },
		    fail: function (err) {
		        console.log("fail:" + JSON.stringify(err));
		    }
		});	
	},		
			
			
			ziyuanlist(){
				
				
				uni.getStorage({
				key: 'user_data',
				success: function (res) {
					this.userid = res.data;
					  console.log('uid'+this.userid);
					  this.ziyuango()
				},
				fail:function(e){
				
						uni.showToast({title: '请登录',icon:"none"});
						
					    uni.navigateTo({
						url:'../../logo/login'
						
					})
			
				}
				
			});		
									
			},
			
			ziyuango(){
				
			    console.log(this.zyuan_type)
				uni.request({
					url: 'https://api.xuejss.com/xue/?s=ziyuan.zy_listdown&infoid=' + this.lginfoid ,
					success: (data) => {
						if (data.data.code == 0) {		
						this.ziyuan_down = data.data.data.download;	
							console.log(this.ziyuan_down);
				 						
						if(this.zyuan_type==1){
						uni.showToast({title: '我是跳转链接的',icon:"none"});						
						var zydown=this.ziyuan_down
                         uni.downloadFile({
                        url: zydown,
                         success: function (res) {
                         var filePath = res.tempFilePath;
                        uni.openDocument({
                         filePath: filePath,
                        success: function (res) {
                         console.log('打开文档成功');
                        }
                        });
                        }
                          });						                                 
	
					}else{
							
						 uni.showToast({title: '我是下载APP的',icon:"none"});
						  var zydown=this.ziyuan_down
                         uni.downloadFile({
                          url: zydown,
                          success: function (res) {
                          var filePath = res.tempFilePath;
                         uni.openDocument({
                          filePath: filePath,
                          success: function (res) {
                          console.log('打开文档成功');
                         }
                         });
                         }
                         });		
	
						}	
		
						}
					},
					fail: () => {
						console.log('fail');
					}
				})	
							
                },
			InputFocus(e) {
				this.InputBottom = e.detail.height

			},
			InputBlur(e) {
				this.InputBottom = 0
			}, 
				getlgxq_re() {
					//请求详情
				 const value = uni.getStorageSync('user_data');	
				uni.request({
					url: 'https://api.xuejss.com/xue/?s=ziyuan.zy_list&infoid=' + this.lginfoid + '&uid=' + value,
					success: (data) => {
						if (data.data.code == 0) {		
						this.lgxq = data.data.data[0];	
						}
					},
					fail: () => {
						console.log('fail');
					}
				})
                // 请求访问记录
				const userid = uni.getStorageSync('user_data');
				
				uni.request({
					url: 'https://api.xuejss.com/xue/?s=others.ziyuanhistory_list&infoid=' + this.lginfoid + '&uid=' + userid,
					success: (data) => {
						if (data.data.code == 0) {		
						this.fw_list = data.data.data.fw_list;
						this.fwcount = data.data.data.fwc;
						this.plcount = data.data.data.plc;
						this.pl_list = data.data.data.pl_list;	
						}
					},
					fail: () => {
						console.log('fail');
					}
				})				
					
		}
	},
	}
</script>
 
 
 <style>
       page{
        padding-bottom: 100upx;
       }
       .photo-xq{
      margin-left: 4%;
      width: 100%;	
	
      } 
	 .jiange{
    border-bottom: 0.5px solid #f4f9f5;
    margin-bottom: 8px;
    margin-top: 3px;
	 }
 </style>
<style lang="scss">
	@keyframes showPopup {
			0% {
				opacity: 0;
			}
			100% {
				opacity: 1;
			}
		}
		@keyframes hidePopup {
			0% {
				opacity: 1;
			}
			100% {
				opacity: 0;
			}
		}
		@keyframes showLayer {
			0% {
				transform: translateY(0);
			}
			100% {
				transform: translateY(-100%);
			}
		}
		@keyframes hideLayer {
			0% {
				transform: translateY(-100%);
			}
			100% {
				transform: translateY(0);
			}
		}
.share{
	display: none;
	&.show {
		display: block;
		.mask{
			animation: showPopup 0.15s linear both;
		}
		.layer {
			animation: showLayer 0.15s linear both;
		}
	}
	&.hide {
		display: block;
		.mask{
			animation: hidePopup 0.15s linear both;
		}
		
		.layer {
			animation: hideLayer 0.15s linear both;
		}
	}
	&.none {
		display: none;
	}
	.mask{
		background-color: rgba(0,0,0,.5);
		position: fixed;
		width: 100%;
		height: 100%;
		top:0;
		z-index: 11;
	}
	.layer{
		width: 100%;
		position: fixed;
		z-index: 9999;
		padding: 0 4%;
		top: 100%;
		background-color: rgba(255,255,255,0.9);
		.list{
			width: 100%;
			display: flex;
			padding:10upx 0 30upx 0;
			.box{
				width: 33.3%;
				display: flex;
				justify-content: center;
				flex-wrap: wrap;
				image{
					width: 13.8vw;
					height: 13.8vw;
				}
				.title{
					margin-top: 10upx;
					display: flex;
					justify-content: center;
					width: 100%;
					font-size: 26upx;
				}
			}
		}
		.btn{
			width: 100%;
			height: 100upx;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 28upx;
			border-top: solid 1upx #666666;
		}
		.h1{
			width: 100%;
			height: 80upx;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 34upx;
		}
	}
}
</style>
